<template>
  <view class="container">
    <!-- 衣物列表部分 -->
    <view class="clothes-list-section">
      <view class="section-title">推荐搭配</view>
      <view v-if="recommendations && recommendations.length > 0">
        <view 
          v-for="(outfit, outfitIndex) in recommendations" 
          :key="'outfit-' + outfitIndex"
          class="outfit-container"
        >
          <view 
            v-for="(item, itemIndex) in outfit.items" 
            :key="'item-' + itemIndex"
            class="clothes-item"
            @click="navigateToDetail(item)"
          >
            <image :src="formatImageUrl(item.image_url)" class="clothes-image" mode="aspectFill" @error="handleImageError($event, item)"></image>
            <view class="clothes-info">
              <text class="category-text">{{ item.category }}</text>
              <text class="subcategory-text">{{ item.subcategory }}</text>
            </view>
            <view class="arrow-icon">
              <uni-icons type="right" size="20" color="#666"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-state">
        <text>暂无推荐搭配</text>
      </view>
    </view>
	
    <!-- 评分部分 -->
    <view class="section rating-section">
        <view class="rating-title">评分搭配:</view>
      <uni-rate 
        :value="ratingValue" 
        :size="32" 
        :margin="15" 
        :is-fill="false"
        active-color="#FFC90E"
        @change="onRatingChange"
      ></uni-rate>
    </view>
    
    <!-- 按钮部分 -->
    <view class="section action-buttons">
      <button class="action-button regenerate-button" @click="regenerateOutfit">
        <uni-icons type="refresh" size="20" color="#f44336"></uni-icons>
        <text>再次生成</text>
      </button>
    </view>

    
    <!-- 详细搭配信息 -->
    <view class="detail-section">
	  <!-- 风格 -->
	  <view class="detail-item">
	    <text class="detail-title">风格：</text>
	    <text class="style-text">{{ theme.join(' ') || '无' }}</text>
	  </view>
      <!-- 搭配季节 -->
      <view class="detail-item">
        <text class="detail-title">搭配季节：</text>
        <view class="season-tags">
          <view 
            v-for="(season, index) in seasons" 
            :key="index" 
            class="season-tag" 
            :class="{ 'selected': selectedSeasons.includes(season) }"
            @click="toggleSeason(season)"
          >
            {{ season }}
          </view>
        </view>
      </view>
      
      <!-- 搭配标签 -->
      <view class="detail-item">
        <text class="detail-title">搭配标签：</text>
        <view class="custom-tags">
          <view v-for="(tag, index) in customTags" :key="index" class="custom-tag">
            {{ tag }}
            <view class="close-icon" @click.stop="removeTag(index)">
              <uni-icons type="close" size="12"></uni-icons>
            </view>
          </view>
          <view class="add-tag" @click="showTagPopup">
            <uni-icons type="plus" size="16"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 适合场景 -->
      <view class="detail-item">
        <text class="detail-title">适合场景：</text>
        <view class="scene-selector" @click="showSceneSelector">
          <text>{{ selectedScenes.length > 0 ? selectedScenes.join('、') : '请选择场景' }}</text>
          <uni-icons type="arrowdown" size="16"></uni-icons>
        </view>
      </view>
      
      <!-- 适穿温度/天气 -->
      <view class="detail-item">
        <text class="detail-title">适穿温度/天气：</text>
        <view v-if="isChecked" class="weather-info">
          <text>温度: {{ weatherData.temperature }}°C</text>
          <text>天气: {{ weatherData.condition }}</text>
          <text>风向: {{ weatherData.winddirection }}</text>
          <text>风力: {{ weatherData.windpower }}级</text>
          <text>湿度: {{ weatherData.humidity }}%</text>
        </view>
        <view v-else class="temp-selector">
          <input v-model="tempRange[0]" type="number" placeholder="最低温度" placeholder-style="font-size:28rpx;" class="temp-input">
          <text>~</text>
          <input v-model="tempRange[1]" type="number" placeholder="最高温度" placeholder-style="font-size:28rpx;" class="temp-input">
          <text>°C</text>
        </view>
      </view>
      
      <view class="action-buttonss">
        <button class="action-button save-button" @click="saveOutfit">
          <uni-icons type="download" size="20" color="#ffc90e" ></uni-icons>
          <text>保存搭配</text>
        </button>
      </view>
      <!-- 收藏按钮 -->
      <view class="favorite-btn" @click="toggleFavorite">
        <uni-icons :type="isFavorite ? 'star-filled' : 'star'" size="24" :color="isFavorite ? '#FFC90E' : '#666'"></uni-icons>
        <text>{{ isFavorite ? '已收藏' : '收藏' }}</text>
      </view>
    </view>
    
    <!-- 添加标签弹窗 -->
    <uni-popup ref="tagPopup" type="dialog">
      <view class="add-tag-dialog">
        <text class="dialog-title">添加标签</text>
        <input v-model="newTag" type="text" placeholder="请输入标签内容" class="tag-input">
        <view class="dialog-btns">
          <button class="cancel-btn" @click="hideTagPopup">取消</button>
          <button class="confirm-btn" @click="addTag">确定</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 场景选择弹窗 -->
    <uni-popup ref="scenePopup" type="bottom">
      <view class="scene-picker">
        <view class="scene-picker-header">
          <text>选择适合场景</text>
          <view @click="hideScenePopup" class="close-icon-wrapper">
            <uni-icons type="close" size="20"></uni-icons>
          </view>
        </view>
        <view class="scene-list">
          <view 
            v-for="(scene, index) in scenes" 
            :key="index" 
            class="scene-item"
            :class="{ 'selected': selectedScenes.includes(scene) }"
            @click="toggleScene(scene)"
          >
            {{ scene }}
          </view>
        </view>
        <button class="confirm-btn" @click="hideScenePopup">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import setting from '../../setting'
export default {
  data() {
    return {
      recommendations: [],
	  receivedOptions: {}, // 新增：存储页面参数
      isChecked: false,
      weatherData: {
        temperature: 0,
        condition: "",
        winddirection: "",
        windpower: 0,
        humidity: 0,
      },
      theme: [],
      currentImageIndex: 0,

      // 新增数据
      seasons: ["春", "夏", "秋", "冬"],
      selectedSeasons: [],
      customTags: [],
      newTag: "",
      scenes: ["日常", "通勤", "约会", "运动", "旅行", "聚会", "正式场合"],
      selectedScenes: [],
      tempRange: [null, null],
      isFavorite: false,
      ratingValue: 0, // 评分值
      hasRated: false, // 是否已评分
      userId: null, // 用户ID
      outfitId: null, // 当前搭配ID
    }
  },
  onLoad(options) {
	this.receivedOptions = options // 保存参数
	this.updateThemeFromQuery() // 调用更新方法
    // 获取用户ID
    this.userId = uni.getStorageSync("user_id") || 1

    if (options.data) {
      const receivedData = JSON.parse(decodeURIComponent(options.data))
      
      // 检查是否有错误信息
      if (receivedData.error) {
        // 显示错误信息
        setTimeout(() => {
          uni.showModal({
            title: '无法生成搭配',
            content: receivedData.error.error_message || '生成搭配失败',
            confirmText: '去添加衣物',
            cancelText: '知道了',
            success: (res) => {
              if (res.confirm) {
                // 跳转到添加衣物页面
                uni.navigateTo({
                  url: '../Wardrobe/Wardrobe'
                });
              }
            }
          });
        }, 500); // 延迟显示，确保页面已加载
      }
      
      // 原有数据初始化
      this.theme = receivedData.theme || []
      this.isChecked = receivedData.isChecked || false
      this.weatherData = receivedData.weatherData || {
        temperature: 0,
        condition: "",
        winddirection: "",
        windpower: 0,
        humidity: 0,
      }

     //  // 新增推荐数据处理
    this.recommendations = receivedData.recommendations || []
    console.log("接收到的推荐数据:", JSON.stringify(this.recommendations))
     //  if(this.recommendations===null)
     //  // 打印每个方案的 clothes_ids
     //  this.recommendations.forEach((outfit, index) => {
     //    console.log(`推荐方案 ${index + 1} 的衣物数据:`, JSON.stringify(outfit.items))
     //  })
    // 新增：检查推荐数据是否为空
    if (!receivedData.recommendations || receivedData.recommendations.length === 0) {
        setTimeout(() => {
                uni.showToast({
                    title: '衣物不足，无法生成搭配',
                    icon: 'none', // 无图标的提示
                    duration: 2000 // 持续时间，单位毫秒
                });
        }, 500);
	}
      // 获取当前搭配ID
      if (this.recommendations.length > 0) {
        const currentOutfit = this.recommendations[this.currentImageIndex]
        this.outfitId = currentOutfit.outfit_id || Math.floor(Math.random() * 10000)

        // 检查是否已收藏
        this.checkIfFavorited()
      }
    }
  },
  methods: {
	// 统一图片URL处理方法
	  formatImageUrl(url) {
	    if (!url) return ""
	    
	    // 处理服务器返回的相对路径
	    if (url.startsWith('/uploads/')) {
	      return `${setting.url}${url}`
	    }
	    
	    // 处理可能存在的其他相对路径
	    if (!url.startsWith('http') && !url.startsWith('/static/')) {
	      return `${setting.url}/uploads/clothes/${url}`
	    }
	    
	    // 已经是完整URL或静态资源路径
	    return url
	  },
	
	  // 图片加载失败处理
	  handleImageError(e, item) {
	    console.error('图片加载失败:', e)
	    // 可以在这里设置默认图片
	    item.image_url = '/static/default-clothes.png'
	  },
    // 导航到衣物详情页
    navigateToDetail(item) {
      console.log("完整衣物数据:", JSON.stringify(item, null, 2))
      if (!item.clothes_id) {
        uni.showToast({ title: "衣物数据异常", icon: "none" })
        return
      }
      uni.navigateTo({
        url: `../ClothesDetail/ClothesDetail?id=${item.clothes_id}`,
      })
    },

    updateThemeFromQuery() {
      try {
        const options = this.receivedOptions || {} // 使用存储的参数
       if (options.data) {
        const receivedData = JSON.parse(decodeURIComponent(options.data))
		// 检查错误信息
        if (receivedData.error) {
            setTimeout(() => {
                    uni.showToast({
                        title: '衣物不足，无法生成搭配',
                        icon: 'none', // 无图标的提示
                        duration: 2000 // 持续时间，单位毫秒
                    });
         }, 500);
        }
		// 添加错误处理，确保data存在且可解析
          this.theme = receivedData.theme || []
          this.isChecked = receivedData.isChecked || false
          this.weatherData = receivedData.weatherData || {
            temperature: 0,
            condition: "",
            winddirection: "",
            windpower: 0,
            humidity: 0,
          }
        }
      } catch (error) {
        console.error("解析数据失败:", error)
        throw error
      }
    },

    parseData(data) {
      return new Promise((resolve, reject) => {
        try {
          if (data) {
            const decodedData = decodeURIComponent(data)
            const parsedData = JSON.parse(decodedData)
            resolve(parsedData)
          } else {
            reject(new Error("No data provided"))
          }
        } catch (error) {
          reject(error)
        }
      })
    },

    onRatingChange(v) {
      this.ratingValue = v.value
      this.hasRated = v.value > 0
    },

    // 季节标签方法
    toggleSeason(season) {
      const index = this.selectedSeasons.indexOf(season)
      if (index === -1) {
        this.selectedSeasons.push(season)
      } else {
        this.selectedSeasons.splice(index, 1)
      }
    },

    // 添加标签弹窗方法
    showTagPopup() {
      this.$refs.tagPopup.open()
    },

    hideTagPopup() {
      this.$refs.tagPopup.close()
      this.newTag = ""
    },

    addTag() {
      if (this.newTag.trim()) {
        this.customTags.push(this.newTag.trim())
        this.hideTagPopup()
      }
    },

    removeTag(index) {
      this.customTags.splice(index, 1)
    },

    // 场景选择弹窗方法
    showSceneSelector() {
      this.$refs.scenePopup.open()
    },

    hideScenePopup() {
      this.$refs.scenePopup.close()
    },

    toggleScene(scene) {
      const index = this.selectedScenes.indexOf(scene)
      if (index === -1) {
        this.selectedScenes.push(scene)
      } else {
        this.selectedScenes.splice(index, 1)
      }
    },

    // 检查搭配是否已收藏
    checkIfFavorited() {
      if (!this.userId || !this.outfitId) return

      uni.request({
        url: `${setting.url}/api/check_collection`,
        method: "GET",
        data: {
          user_id: this.userId,
          outfit_id: this.outfitId,
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.isFavorite = res.data.is_collected
          }
        },
        fail: (err) => {
          console.error("检查收藏状态失败:", err)
        },
      })
    },

    // 更新后的收藏切换方法
    toggleFavorite() {
      if (!this.userId) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        })
        return
      }

      // 获取当前显示的搭配
      const currentOutfit = this.recommendations[this.currentImageIndex] || this.recommendations[0]
      if (!currentOutfit) {
        uni.showToast({
          title: "没有可收藏的搭配",
          icon: "none",
        })
        return
      }

      // 确保有outfit_id
      this.outfitId = currentOutfit.outfit_id || this.outfitId

      if (!this.outfitId) {
        uni.showToast({
          title: "搭配ID无效",
          icon: "none",
        })
        return
      }

      // 准备请求数据
      const requestData = {
        user_id: this.userId,
        outfit_id: this.outfitId,
        // 如果是取消收藏，不需要这些额外数据
        ...(this.isFavorite
          ? {}
          : {
              seasons: this.selectedSeasons.join(","),
              tags: this.customTags.join(","),
              scenes: this.selectedScenes.join(","),
              style: this.theme.join(" "),
              weather_info: this.getWeatherInfo(),
            }),
      }

      // 发送请求
      uni.request({
        url: `${setting.url}/api/${this.isFavorite ? "remove_collection" : "add_collection"}`,
        method: "POST",
        data: requestData,
        success: (res) => {
          if (res.statusCode === 200) {
            // 更新收藏状态
            this.isFavorite = !this.isFavorite

            uni.showToast({
              title: this.isFavorite ? "收藏成功" : "已取消收藏",
              icon: "success",
            })
          } else {
            uni.showToast({
              title: res.data.error || "操作失败",
              icon: "none",
            })
          }
        },
        fail: (err) => {
          console.error("收藏操作失败:", err)
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          })
        },
      })
    },

    // 修改后的保存搭配信息方法
    saveOutfit() {
      // 1. 检查评分是否为0
      if (this.ratingValue === 0) {
        uni.showToast({
          title: "请先评分再保存搭配",
          icon: "none",
          duration: 1500,
        })
        return
      }

      // 获取当前显示的搭配
      const currentOutfit = this.recommendations[this.currentImageIndex] || this.recommendations[0]

      if (!currentOutfit) {
        uni.showToast({
          title: "没有可保存的搭配",
          icon: "none",
          duration: 1500,
        })
        return
      }

      // 获取衣物ID列表
      const clothes_ids =
        currentOutfit.clothes_ids || (currentOutfit.items && currentOutfit.items.map((item) => item.clothes_id)) || []

      if (clothes_ids.length === 0) {
        uni.showToast({
          title: "搭配中没有衣物",
          icon: "none",
          duration: 1500,
        })
        return
      }

      // 2. 构建提交的数据结构，包含所有需要的信息
      const outfitData = {
        user_id: this.userId, // 用户ID
        outfit_id: currentOutfit.outfit_id || this.outfitId || Math.floor(Math.random() * 10000), // 搭配ID
        clothes_ids: clothes_ids, // 衣物ID列表
        rating: this.ratingValue, // 评分值
        seasons: this.selectedSeasons.join(","), // 季节，以逗号分隔
        tags: this.customTags.join(","), // 自定义标签，以逗号分隔
        scenes: this.selectedScenes.join(","), // 场景，以逗号分隔
        style: this.theme.join(" "), // 风格/主题
        weather_info: this.getWeatherInfo(), // 获取天气/温度信息
      }

      console.log("准备提交的搭配数据:", outfitData)

      // 发送POST请求到后端接口
      uni.request({
        url: setting.url + "/api/submit_feedback", // 后端接口地址
        method: "POST",
        data: outfitData,
        header: {
          "content-type": "application/json", // 设置请求头为JSON格式
        },
        success: (res) => {
          if (res.statusCode === 200) {
            // 提交成功
            uni.showToast({
              title: "搭配已保存",
              icon: "success",
              duration: 1500,
            })

            // 更新outfitId，以便后续收藏使用
            this.outfitId = res.data.outfit_id || this.outfitId

            console.log("保存的搭配数据:", outfitData)
            console.log("服务器响应:", res.data)
          } else {
            // 提交失败
            uni.showToast({
              title: "保存失败: " + (res.data.error || "未知错误"),
              icon: "none",
              duration: 1500,
            })
            console.error("保存失败:", res.data)
          }
        },
        fail: (err) => {
          // 请求失败
          uni.showToast({
            title: "请求失败",
            icon: "none",
            duration: 1500,
          })
          console.error("请求失败:", err)
        },
      })
    },

    // 获取天气/温度信息的辅助方法
    getWeatherInfo() {
      if (this.isChecked) {
        // 如果使用实时天气数据
        return JSON.stringify({
          type: "weather",
          temperature: this.weatherData.temperature,
          condition: this.weatherData.condition,
          winddirection: this.weatherData.winddirection,
          windpower: this.weatherData.windpower,
          humidity: this.weatherData.humidity,
        })
      } else {
        // 如果使用温度范围
        return JSON.stringify({
          type: "temperature_range",
          min: this.tempRange[0],
          max: this.tempRange[1],
        })
      }
    },

    async regenerateOutfit() {
      try {
        // 显示加载状态
        uni.showLoading({
          title: "正在生成新搭配...",
          mask: true,
        })
        // 添加随机因子，确保每次请求不同
        const randomSeed = Math.floor(Math.random() * 10000)
        console.log(randomSeed)
        // 准备请求参数
        const requestData = {
          user_id: this.userId, // 从本地存储获取或使用默认值
          weather: this.weatherData.condition,
          temperature: this.weatherData.temperature,
          theme: this.theme.join(","),
          season: this.getSeasonFromDate(),
          n_recommendations: 1, // 每次重新生成1个方案
          random_seed: randomSeed, // 添加随机种子
        }

        // 调用推荐API
        const response = await uni.request({
          url: setting.url + "/api/recommend_outfit",
          method: "POST",
          data: requestData,
          header: {
            "Content-Type": "application/json",
          },
        })

        // 处理响应
        if (response.statusCode === 200) {
          // 检查是否有错误信息
          if (response.data.error) {
            // 显示错误信息
            uni.showModal({
              title: '无法生成搭配',
              content: response.data.error.error_message || '生成搭配失败',
              confirmText: '去添加衣物',
              cancelText: '知道了',
              success: (res) => {
                if (res.confirm) {
                  // 跳转到添加衣物页面
                  uni.navigateTo({
                    url: '../Wardrobe/Wardrobe'
                  });
                }
              }
            });
            return;
          }

          const newRecommendation = response.data.recommendations[0]
          
          // 检查是否有有效的推荐
          if (!newRecommendation) {
            uni.showModal({
              title: '无法生成搭配',
              content: '没有找到合适的搭配方案',
              showCancel: false
            });
            return;
          }

          // 替换当前显示的推荐方案
          this.recommendations = [newRecommendation]
          this.currentImageIndex = 0

          // 更新outfitId
          this.outfitId = newRecommendation.outfit_id || Math.floor(Math.random() * 10000)

          // 重新检查收藏状态
          this.checkIfFavorited()

          uni.showToast({
            title: "新搭配已生成",
            icon: "success",
          })

          console.log("新生成的搭配:", newRecommendation)
        } else {
          throw new Error(response[1].data.error || "生成失败")
        }
      } catch (error) {
        console.error("重新生成搭配失败:", error)
        uni.showToast({
          title: "生成失败: " + error.message,
          icon: "none",
          duration: 2000,
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 辅助方法：根据日期获取季节
    getSeasonFromDate() {
      const month = new Date().getMonth() + 1
      if (month >= 3 && month <= 5) return "春季"
      if (month >= 6 && month <= 8) return "夏季"
      if (month >= 9 && month <= 11) return "秋季"
      return "冬季"
    }
  },
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f9f9f9;
  overflow-y: auto;
}

.section {
  margin-bottom: 40rpx;
  justify-content: space-between;
  overflow: hidden;
}


/* 新增衣物列表样式 */
.clothes-list-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.outfit-container {
  margin-bottom: 20rpx;
}

.clothes-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.clothes-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
  margin-right: 20rpx;
}

.clothes-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.subcategory-text {
  font-size: 26rpx;
  color: #666;
}

.arrow-icon {
  margin-left: 20rpx;
}

.empty-state {
  padding: 40rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

/* 评分部分样式 */
.rating-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  min-height: 100rpx;
}

.rating-title {
  font-size: 32rpx;
  margin-bottom: 20rpx;
  color: #333;
  font-weight: bold;
}


/* 详细信息部分样式 */
.detail-section {
  display: flex;
    flex-direction: column;
    gap: 30rpx;
    margin-bottom: 40rpx;
    flex-grow: 1;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  border-left: 8rpx solid #FFC90E;
}

.detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 2rpx dashed #eaeaea;
  padding-bottom: 12rpx;
}

.season-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  padding: 10rpx 0;
}

.season-tag {
  padding: 10rpx 24rpx;
  border: 1px solid #FFC90E;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #333;
  background-color: transparent;
  box-shadow: 0 2rpx 6rpx rgba(255, 201, 14, 0.2);
  transition: all 0.3s;
}

.season-tag.selected {
  background-color: #FFC90E;
  color: #333;
  box-shadow: 0 2rpx 8rpx rgba(255, 201, 14, 0.4);
  transform: translateY(-2rpx);
}

.custom-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15rpx;
  padding: 10rpx 0;
}

.custom-tag {
  display: flex;
  align-items: center;
  padding: 10rpx 24rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #333;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.close-icon {
  margin-left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  border: 2rpx dashed #999;
  border-radius: 50%;
  color: #999;
  background-color: #f9f9f9;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.scene-selector {
  display: flex;
  align-items: center;
  padding: 18rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  justify-content: space-between;
  background-color: #f9f9f9;
  box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.scene-picker {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx 20rpx 0 0;
}

.scene-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.scene-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 40rpx;
  max-height: 600rpx;
  overflow-y: auto;
}

.scene-item {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.scene-item.selected {
  border-color: #FFC90E;
  background-color: rgba(255, 201, 14, 0.1);
  box-shadow: 0 2rpx 8rpx rgba(255, 201, 14, 0.3);
  transform: translateY(-2rpx);
}

.confirm-btn {
  background-color: #FFC90E;
  color: #333;
  font-size: 28rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 201, 14, 0.3);
}

.weather-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  font-size: 28rpx;
  padding: 10rpx 0;
}

.weather-info text {
  padding: 10rpx 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  border: 1rpx solid #eaeaea;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

.temp-selector {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 10rpx 0;
}

.temp-input {
  width: 140rpx;
  padding: 12rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  text-align: center;
  background-color: #f9f9f9;
  box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.style-text {
  font-size: 28rpx;
  color: #333;
  padding: 12rpx 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  border-left: 4rpx solid #FFC90E;
}

.favorite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
  transition: all 0.3s;
}

.favorite-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

/* 添加标签对话框样式 */
.add-tag-dialog {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  width: 600rpx;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
  text-align: center;
  color: #333;
}

.tag-input {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
  font-size: 28rpx;
  background-color: #f9f9f9;
  box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.dialog-btns {
  display: flex;
  justify-content: space-between;
}

.dialog-btns button {
  flex: 1;
  margin: 0 15rpx;
  font-size: 28rpx;
  border-radius: 12rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
  border: 1rpx solid #eaeaea;
}

.confirm-btn {
  background-color: #FFC90E;
  color: #333;
  box-shadow: 0 4rpx 12rpx rgba(255, 201, 14, 0.3);
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
  min-height: 100rpx;
}

.action-buttonss {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 24rpx 20rpx;
  font-size: 30rpx;
  font-weight: 500;
  height: 100rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  border: none;
  position: relative;
  overflow: hidden;
}

.action-button:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.regenerate-button {
  color: #f44336;
  border-left: 8rpx solid #f44336;
}

.save-button {
  color: #ffc90e;
  border-left: 8rpx solid #ffc90e;
}

.save-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 201, 14, 0.08);
  z-index: -1;
}

.close-icon-wrapper {
  padding: 8rpx;
}
</style>
